<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">提现
      <span class="innow"
            @click="$router.push('/myrecord')">提现记录</span></x-header>
    <div class="top">
      ￥<countup :end-val="maxreflect"
               :duration="1.5"
               :decimals="2"
               class="moneynum"></countup>
      <p style="font-size:.34rem;">可提现金额</p>
      <div class="rows">
        <!-- <div><i class="wx-png"></i></div> -->
        <x-input title="￥"
                 v-model="textid"
                 type="number"
                 id="textid"
                 placeholder-align="right"
                 text-align="right"
                 :placeholder="placeholder"></x-input>
        <x-input title="手续费:"
                 v-bind:id="fee | money"
                 v-model="fee"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"
                 disabled></x-input>
        <x-input title="实到额度:"
                 v-bind:id="Actuallylimit | money"
                 v-model="Actuallylimit"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"
                 disabled></x-input>
        <x-input title="账户余额:"
                 v-bind:id="totalmoney | money"
                 v-model="totalmoney"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"
                 disabled></x-input>
      </div>
    </div>
    <div class="middle_top">
      <h3>提现方式</h3>
      <span class="innowtext"
            @click="$router.push('/credited')">添加账户</span>
    </div>
    <div class="middle">
      <div class="zhifubao"><i class="zfb-icon"></i>支付宝
        <checklist :options="sendContent"
                   v-model="radioValue"
                   :max="1"
                   label-position=left
                   @on-change="change"></checklist>
      </div>
      <!-- <div class="card"><i class="card-icon"></i>银行卡
        <checklist :options="sendContent1"
                   v-model="radioValue"
                   :max="1"
                   label-position=left
                   @on-change="change"></checklist>
      </div> -->
    </div>
    <button @click="pricement">立即提现</button>

   <!-- <div v-transfer-dom>
      <popup v-model="show">
        <div class="popup0">
          <group>
            <cell title="支付宝"
                  link="/myaddweixinuser"
                  inline-desc=''></cell>
            <cell title="银行卡"
                  link="/myaddCard"
                  inline-desc=''></cell>
          </group>
        </div>
      </popup>
    </div> -->

    <dialog-bar v-model="sendVal"
                type="danger"
                title="选择账户"
                :content="sendContent"
                v-on:child-say="listenToMyBoy">
    </dialog-bar>
    <dialog-bar2 v-model="sendVal2"
                 type="danger"
                 title="选择账户"
                 :content="sendContent1"
                 v-on:child-say="listenToMyBoy1">
    </dialog-bar2>
    <dialog-Tips v-model="sendVal3"
                 type="danger"
                 title="注意事项"
                 :content="sendContent2">
    </dialog-Tips>
  </div>
</template>

<script>
import '../../filters/moneyfilter.js'
import dialogBar from './components/dialogs.vue'
import dialogbar2 from './components/dialogCard.vue'
import dialogTips from './components/dialogTips.vue'
import { mapState } from 'vuex'
import { getPaymenAccountList, SubmitPutForwardUR, getP2PUserPositions } from '@api'
import { Countup, XInput, Checklist, Popup, Cell, Group, TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    'dialog-bar': dialogBar,
    'dialog-bar2': dialogbar2,
    'dialog-Tips': dialogTips,
    Countup,
    XInput,
    Checklist,
    Popup,
    Cell,
    Group
  },
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      totalmoney: 0.00, // 余额
      maxreflect: 0.00, // 今日最大提现额
      fee: 0.00, // 手续费
      Actuallylimit: 0.00, // 实到额度
      numwithdraw: 0, // 提现剩余次数
      sendVal: false,
      sendVal2: false,
      sendVal3: false,
      isw: false,
      isc: false,
      sendContent: [], // 選擇微信賬戶内容
      sendContent1: [], // 選擇銀行卡内容
      sendContent2: '这是注意事项内容', // 注意事項内容
      placeholder: '请输入提现金额',
      textid: '',
      form: {
        integral_money: 0.00, // 申请提现金额
        putforward_money: 0.00, // 实到金额
        account_type: 0, // 提现账户类型
        account_name: '', // 姓名
        account_number: '', // 账户
        account_open_bank: '', // 开户行
        apply_remark: '活动提现', // 申请活动余额提现标记
        goodsid: ''
      },
      show: false,
      radioValue: []
    }
  },
  methods: {
    change (val, label) {
      var arr = (label[0] || '').split('&nbsp&nbsp')
      if (arr[0] === '支付宝') {
        this.form.account_type = 3
      } else {
        this.form.account_type = 1
      }
      this.form.account_name = arr[2]
      this.form.account_number = arr[1]
      this.form.account_open_bank = arr[0]
    },
    openMask (index) {
      this.sendVal = true
    },
    openMask2 (index) {
      this.sendVal2 = true
    },
    openMask3 (index) {
      this.sendVal3 = true
    },
    async pricement () {
      if (!this.textid || this.textid.length === 0) {
        return this.$toastText('请先输入提现金额！')
      }
      if (this.form.account_name === '' || this.form.account_number === '' || this.form.account_open_bank === '') {
        return this.$toastText('请先选择提现到账账户！')
      }
      this.form.integral_money = this.textid
      this.form.putforward_money = this.Actuallylimit
      this.form.goodsid = this.$route.query.goodsid
      let res = await SubmitPutForwardUR(this.form)
      if (res.code === 200) {
        this.$router.replace(`/myWithdrawalsuccess/${this.textid}/${this.$options.filters.money(this.fee)}/${this.$options.filters.money(this.Actuallylimit)}`) // (/myWithdrawalsuccess/:price/:charge/:actual 提现金额，手续费，实到金额)
      }
    },
    chooseweixin: function (e) {
      this.isw = !this.isw
      if (this.isc) {
        this.isc = !this.isc
      }
      if (this.isw) {
        this.openMask()
      }
    },
    choosecard: function (a) {
      this.isc = !this.isc
      if (this.isw) {
        this.isw = !this.isw
      }
      if (this.isc) {
        this.openMask2()
      }
    },
    listenToMyBoy: function (val) {
      this.paymenttype = val[0]
      this.paymentname = val[1]
      this.paymentcard = val[2]
    },
    listenToMyBoy1: function (val) {
      this.paymenttype = val[0]
      this.paymentname = val[1]
      this.paymentcard = val[2]
      this.paymentopenbank = val[3]
    },
    // 加载页面数据
    async loadData () {
      // 查询用户活动持仓信息
      let form = new FormData()
      form.append('position_goods_id', this.$route.query.goodsid)
      form.append('position_user_id', this.$route.query.userid)
      let userposition = await getP2PUserPositions(form)
      if (userposition && userposition.code === 200) {
        this.totalmoney = userposition.data.position_balance
        this.maxreflect = userposition.data.position_balance
      }
      var userid = this.user.user_id
      var usertype = 2
      this.sendContent1 = []
      this.sendContent = []
      // 获取用户收款账户列表
      let res = await getPaymenAccountList(userid, usertype)
      if (res.code === 200) {
        for (let i = 0; i < res.data.length; i++) {
          switch (res.data[i].account_type) {
            case 0:
              this.sendContent1 = []
              this.sendContent1.push(res.data[i].bank_name + '&nbsp&nbsp' + res.data[i].account_number + '&nbsp&nbsp' + res.data[i].account_name)
              break
            case 1:
              this.sendContent = []
              this.sendContent.push(res.data[i].bank_name + '&nbsp&nbsp' + res.data[i].account_number + '&nbsp&nbsp' + res.data[i].account_name)
              break
            default:
              break
          }
        }
      }
    }
  },
  // 监听提现金额输入框的输入内容改变
  watch: {
    textid: function (val) {
      if (val != null) {
        // 通过正则过滤小数点后两位
        this.textid = val.match(/^\d*(\.?\d{0,2})/g)[0] || null
        if (this.textid > this.maxreflect) {
          alert('输入的金额大于可提现金额')
          this.textid = ''
        }
        // this.fee = (this.textid * 0.1).toFixed(2) // 计算手续费 10%
        this.Actuallylimit = this.textid // 未扣除手续费的结算金额
        // this.Actuallylimit = (this.textid - this.fee).toFixed(2) // 扣除手续费后的结算金额
      }
    }
  },
  created () {
    this.loadData()
  },
  activated () {
    // 加载页面数据
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/pub';
.popup0 {
  padding-bottom: .1875rem;
  height: 2.5rem;
}
.view {
  width: 100%;
  text-align: center;
  /deep/ .weui-cells {
    font-size: .35rem;
  }
  .innow {
    position: fixed;
    right: .225rem;
    font-size: .375rem;
    color: #666666;
  }
  .innow:hover {
    color: #ff0036;
  }
  .innowtext {
    position: fixed;
    right: .225rem;
    font-size: 0.3rem;
    color: #666666;
  }
  .innowtext:hover {
    color: #ff0036;
  }
  .top {
    width: 100%;
    margin-top: 5%;
    p {
      padding-top: 3%;
      color: #666666;

      i {
        margin-left: .25rem;
      }
    }
    .moneynum {
      font-size: 1rem;
      font-weight: bold;
      color: #ff0036;
    }
    input {
      width: 5.7875rem;
      height: .6625rem;
      border: .025rem solid #c7c7c7;
      border-radius: .125rem;
      padding-left: .125rem;
    }
    .row {
      width: 5.7875rem;
      background: #ff0036;
      margin-top: 2%;
      margin-left: 20%;
      .fee {
        float: left;
      }
      .Actuallylimit {
        float: right;
      }
    }
    .rows {
      background: #fff;
      margin: 5%;
      border-radius: .125rem;
    }
  }
  .middle_top {
    text-align: left;
    padding-left: 0.5%;
    line-height: .925rem;
    font-family: MicrosoftYaHei;
    h3 {
      color: #000000;
      padding: 3%;
      margin-left: .125rem;
      display: inline;
      font-weight: normal;
    }
  }
  font {
    color: #666666;
  }
  .middle {
    background-color: #fff;
    text-align: left;
    .zhifubao {
      line-height: .925rem;
      border-bottom: .025rem solid #f7f7f7;
      margin-left: 4%;
      .zfb-icon {
        margin-right: .125rem;
      }
    }
    .card {
      line-height: .925rem;
      border-bottom: .025rem solid #f7f7f7;
      margin-left: 4%;
      .card-icon {
        margin-right: .125rem;
      }
    }
  }
  .weixinn {
    width: .5rem;
    height: .5rem;
    background: url("http://img.zanjl.com/Content/img/image/gray-icon@2x.png")
      no-repeat;
    background-size: 100%;
    float: right;
    margin: 2%;
  }
  .card-btn {
    width: .5rem;
    height: .5rem;
    background: url("http://img.zanjl.com/Content/img/image/gray-icon@2x.png")
      no-repeat;
    background-size: 100%;
    float: right;
    margin: 2%;
  }
  .detail-selected {
    background: url("http://img.zanjl.com/Content/img/image/redgou@2x.png")
      no-repeat;
    background-size: 100%;
  }
  button {
    text-align: center;
    width: 100%;
    height: 1.225rem;
    position: fixed;
    left: 0;
    bottom: 0;
    border: 0;
    color: #fff;
    background: #ff0036;
  }
}
</style>
